<script lang="ts" setup>
import { reactive, useTemplateRef } from 'vue'
import { ElButton, ElMessage } from 'element-plus'

interface Student {
  id: number
  name: string
  age: number
  sex: string
}
const tableRadioRef = useTemplateRef('tableRadioRef')
const toggleRowRadio = () => {
  if (tableRadioRef.value) {
    tableRadioRef.value.tableRef?.toggleRowRadio(tableData[0], undefined, true)
  }
}
const tableData = reactive<Student[]>([
  {
    id: 1,
    name: '王五',
    age: 20,
    sex: '男'
  },
  {
    id: 2,
    name: '张三',
    age: 18,
    sex: ''
  },
  {
    id: 3,
    name: '李四',
    age: 19,
    sex: '女'
  }
])
const tableConfigRadio = reactive<TableConfig<Student>>({
  columns: [
    {
      type: 'single',
      prop: 'single',
      selectable(_, index) {
        return index !== 1
      }
    },
    {
      type: 'default',
      label: '姓名',
      prop: 'name'
    },
    {
      type: 'default',
      label: '年龄',
      prop: 'age'
    },
    { type: 'default', label: '性别', prop: 'sex', width: 200 }
  ],
  singleChange: val => {
    ElMessage.success(`选中了：${JSON.stringify(val)}`)
  }
})
</script>
<template>
  <ElButton @click="toggleRowRadio">设置第一行</ElButton>
  <XyTable ref="tableRadioRef" :tableConfig="tableConfigRadio" :tableData="tableData" />
</template>
